/**
 * 横向柱状图
 * xyHorizontalChart (reactCharts)
 * @author zxy
 * @date  2020-09-17
 */
import React from 'react';
import { XYHorizontalChartsC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../comps';
import { Row, Col, Button } from 'antd';
// import {handleNumberToString} from '@/utils/helper';
import Color from '../../css/colors';

class xyHorizontalChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      yAxis1: undefined,
      series1: undefined,
      yAxis2: ['基金1', '基金2', '基金3', '基金4', '基金5', '基金6', '基金7', '基金8', '基金9', '基金10'],
      series2: [{ name: 'jijin', data: [, 0.0125, -0.2566, , 0.0012, 0.1234, -0.0125, 0, -0.4523, 0.0012] }],
      yAxis3: [
        '基金1',
        '基金2',
        '基金3',
        '基金4',
        '基金5',
        '基金6',
        '基金7',
        '基金8',
        '基金9',
        '基金10',
        '基金1',
        '基金2',
        '基金3',
        '基金4',
        '基金5',
        '基金6',
        '基金7',
        '基金8',
        '基金9',
        '基金10',
        '基金1',
        '基金2',
        '基金3',
        '基金4',
        '基金5',
        '基金6',
        '基金7',
        '基金8',
        '基金9',
        '基金10',
        '基金1',
        '基金2',
        '基金3',
        '基金4',
        '基金5',
        '基金6',
        '基金7',
        '基金8',
        '基金9',
        '基金10',
      ],
      series3: [
        {
          name: 'jijin',
          data: [
            10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
          ],
        },
      ],
      yAxis4: ['基金1', '基金2', '基金3', '基金4', '基金5', '基金6', '基金7', '基金8', '基金9', '基金10'],
      series4: [{ name: 'jijin', data: [, 0.0125, 0.1806, , 0.0012, 0.1234, 0.0125, 0, 0.4523, 0.0012] }],
      yAxis5: ['基金1', '基金2', '基金3', '基金4', '基金5', '基金6', '基金7', '基金8', '基金9', '基金10'],
      series5: [
        { name: '盈亏占比', data: [-0.2568, -0.13, -0.25666, -0.1234, -0.0012, -0.1234, -0.0125, -0, -0.4523, -0.0012] },
        { name: '持仓占比', data: [0.0125, 0.2566, 0.1234, 0.0012, 0.1234, 0.0125, 0, 0.4523, 0.0012, 0.00235] },
      ],
      yAxis6: undefined,
      series6: undefined,
      series7: [{ name: '组合', data: [-1122000, -9150, 900, 72020, 430920] }],
      yAxis7: ['油脂油料', '煤焦钢矿', '有色金属', '股指期货', '贵金属'],
      series8: [
        { name: '付息', data: [, -60, -70, -80, -90, -100, -110, -120, -130] },
        { name: '到期', data: [-51, -61, -71, -81, -91, -101, -111, -121, -131] },
        // {name:'买入',data:[-52, -62, -72, -82, -92, -102, -112, -122, -132]},
        { name: '卖出', data: [-53, -63, -73, -83, -93, -103, -113, -123, -133] },
      ],
      yAxis8: ['资产类型1', '资产类型2', '资产类型3', '资产类型4', '资产类型5', '资产类型6', '资产类型7', '资产类型8', '资产类型9'],
      series9: [
        { name: '付息', data: [50, 60, 70, 80, 90, 100, 110, 120, 130] },
        { name: '到期', data: [, 61, 71, 81, 91, 101, 111, 121, 131] },
        { name: '买入', data: [52, 62, 72, 82, 92, 102, 112, 122, 132] },
        // {name:'卖出',data:[53, 63, 73, 83, 93, 103, 113, 123, 133]},
      ],
      yAxis9: ['资产类型1', '资产类型2', '资产类型3', '资产类型4', '资产类型5', '资产类型6', '资产类型7', '资产类型8', '资产类型9'],
      legend: ['付息', '到期', '卖出', '买入'],
      color: ['#1997E6', '#F1C53F', '#28DB94', '#456DBC'],
      color1: [Color.echart[0], Color.echart[1], Color.echart[2]],
      color2: [Color.echart[0], Color.echart[1], Color.echart[3]],
    };

    setTimeout(() => {
      this.setState({
        yAxis1: ['基金1', '基金基金基金基金基金', '基金1', '基金1'],
        series1: [{ name: 'jijin', data: [10, 20, 30, 40] }],
        yAxis6: [
          '基金1',
          '基金2',
          '基金3',
          '基金4',
          '基金5',
          '基金6',
          '基金7',
          '基金8',
          '基金9',
          '基金10',
          '基金1',
          '基金2',
          '基金3',
          '基金4',
          '基金5',
          '基金6',
          '基金7',
          '基金8',
          '基金9',
          '基金10',
          '基金1',
          '基金2',
          '基金3',
          '基金4',
          '基金5',
          '基金6',
          '基金7',
          '基金8',
          '基金9',
          '基金10',
          '基金1',
          '基金2',
          '基金3',
          '基金4',
          '基金5',
          '基金6',
          '基金7',
          '基金8',
          '基金9',
          '基金10',
        ],
        series6: [
          {
            name: 'jijin',
            data: [
              10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
            ],
          },
        ],
      });
    }, 2000);
  }

  unselect = () => {
    this.state.ref1.setLegend('unselect', '付息');
    this.state.ref2.setLegend('unselect', '付息');
  };

  select = () => {
    this.state.ref1.setLegend('select', '付息');
    this.state.ref2.setLegend('select', '付息');
  };

  legendClick1 = (name) => {
    this.state.ref1.setLegend('unselect', name);
    this.state.ref2.setLegend('unselect', name);
  };
  legendClick2 = (name) => {
    this.state.ref1.setLegend('select', name);
    this.state.ref2.setLegend('select', name);
  };
  render() {
    return (
      <div>
        <FirstHeaderC title='echarts图' />
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='坐标轴' />
            <XYHorizontalChartsC yAxis={this.state.yAxis7} series={this.state.series7} height={500} type='debtAndProfit' title='标题' />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='有正有负的堆叠图' />
            <XYHorizontalChartsC yAxis={this.state.yAxis8} series={this.state.series8} height={500} title='资产类型' type='stack' showLegend={false} yAxisPosition='right' />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='普通横向柱状图' />
            <XYHorizontalChartsC yAxis={this.state.yAxis1} series={this.state.series1} height={500} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='环形图' />
            <XYHorizontalChartsC yAxis={this.state.yAxis2} series={this.state.series2} height={500} type='debtAndProfit' title='收益归因（总和：0.68%）' percentStyle={true} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='很多元素' />
            <XYHorizontalChartsC yAxis={this.state.yAxis3} series={this.state.series3} height={500} isShowSeriesLabel={false} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='展示百分号' />
            <XYHorizontalChartsC yAxis={this.state.yAxis4} series={this.state.series4} height={500} percentStyle={true} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='无数据' />
            <XYHorizontalChartsC yAxis={[]} series={[]} height={500} />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='多维度' />
            <XYHorizontalChartsC yAxis={this.state.yAxis5} series={this.state.series5} height={500} percentStyle={true} />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='自由伸缩无数据' />
            <XYHorizontalChartsC yAxis={[]} series={[]} height='auto' />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='自由伸缩很多数据' />
            <XYHorizontalChartsC yAxis={this.state.yAxis6} series={this.state.series6} height='auto' />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='自由伸缩多维度' />
            <XYHorizontalChartsC yAxis={this.state.yAxis5} series={this.state.series5} height='auto' />
          </Col>
          <Col span={12}>
            <SecondHeaderC title='自由伸缩很少数据' />
            <XYHorizontalChartsC yAxis={this.state.yAxis1} series={this.state.series1} height='auto' />
          </Col>
        </Row>
        <SecondHeaderC title='现金流回溯' />
        <Row gutter={16}>
          <Col span={12} style={{ paddingLeft: '0px', paddingRight: '0px' }}>
            <XYHorizontalChartsC
              // color={[]}
              yAxis={this.state.yAxis8}
              series={this.state.series8}
              height={500}
              type='stack'
              // showLegend={false}
              colors={this.state.color1}
              gridLeft={100}
              gridRight={0}
              containLabel={false}
              onRef={(ref) => this.setState({ ref1: ref })}
              showTooltipLabel={false}
              toolTipFormat={(params) => {
                let str = '<div style="color:#FFFFFF">';
                str += `<div>${params[0].name}</div>`;

                let dataIndex = params[0].dataIndex;
                this.state.legend.map((item, index) => {
                  let tempL = this.state.series8.filter((ele) => ele.name === item);
                  let tempR = this.state.series9.filter((ele) => ele.name === item);

                  let value = '';
                  if (tempL && tempL.length === 1) {
                    value = tempL[0].data[dataIndex] ? tempL[0].data[dataIndex] : '--';
                  } else {
                    value = '--';
                  }
                  value += ', ';
                  if (tempR && tempR.length === 1) {
                    value += tempR[0].data[dataIndex] ? tempR[0].data[dataIndex] : '--';
                  } else {
                    value += '--';
                  }

                  str += `<div style="display:flex;align-items:center">
                                  <div style="border:1px solid rgba(255,255,255,1);width:10px;height:10px;border-radius:50%;background-color:${this.state.color[index]};margin-right:10px"></div> 
                                  ${item}： ${value}
                                </div>`;
                });

                str += '</div>';
                return str;
              }}
            />
          </Col>
          <Col span={12} style={{ paddingLeft: '0px', paddingRight: '0px' }}>
            <XYHorizontalChartsC
              yAxis={this.state.yAxis9}
              series={this.state.series9}
              height={500}
              type='stack'
              colors={this.state.color2}
              // showLegend={false}
              yAxisPosition='right'
              gridLeft={0}
              gridRight={100}
              containLabel={false}
              onRef={(ref) => this.setState({ ref2: ref })}
              showTooltipLabel={false}
              toolTipFormat={(params) => {
                let str = '<div style="color:#FFFFFF">';
                str += `<div>${params[0].name}</div>`;

                let dataIndex = params[0].dataIndex;
                this.state.legend.map((item, index) => {
                  let tempL = this.state.series8.filter((ele) => ele.name === item);
                  let tempR = this.state.series9.filter((ele) => ele.name === item);

                  let value = '';
                  if (tempL && tempL.length === 1) {
                    value = tempL[0].data[dataIndex] ? tempL[0].data[dataIndex] : '--';
                  } else {
                    value = '--';
                  }
                  value += ', ';
                  if (tempR && tempR.length === 1) {
                    value += tempR[0].data[dataIndex] ? tempR[0].data[dataIndex] : '--';
                  } else {
                    value += '--';
                  }

                  str += `<div style="display:flex;align-items:center">
                                  <div style="border:1px solid rgba(255,255,255,1);width:10px;height:10px;border-radius:50%;background-color:${this.state.color[index]};margin-right:10px"></div> 
                                  ${item}： ${value}
                                </div>`;
                });

                str += '</div>';
                return str;
              }}
            />
          </Col>
        </Row>
        <Row>
          去掉图例
          <div style={{ display: 'flex' }}>
            {this.state.legend.map((item, index) => (
              <div key={item} style={{ color: this.state.color[index], marginLeft: '20px' }} onClick={() => this.legendClick1(item)}>
                {item}
              </div>
            ))}
          </div>
        </Row>
        <Row>
          添加图例
          <div style={{ display: 'flex' }}>
            {this.state.legend.map((item, index) => (
              <div key={item} style={{ color: this.state.color[index], marginLeft: '20px' }} onClick={() => this.legendClick2(item)}>
                {item}
              </div>
            ))}
          </div>
        </Row>
      </div>
    );
  }
}

export default xyHorizontalChart;
